<script setup>
import { ref, onMounted } from 'vue';
import { getBannerAPI } from '@/api/api';
const bannerList = ref([])
const getBanner = async ()=>{
  const res = await getBannerAPI()
  bannerList.value = res.result
}
onMounted(()=>{
  getBanner()
  
})
</script>

<template>
  <div class="home-banner"> 
    
    <a-carousel dot-position="bottom" autoplay>
      <img v-for="item in bannerList" :key="item.id" :src="item.imgUrl" alt="">
    </a-carousel>

    <!-- {{ bannerList.value[0] }} -->
  </div>
</template>

<style scoped lang='less'>
.home-banner {
  width: 1240px;
  height: 500px;
  // position: absolute;
  // left: 0;
  // top: 0;
  z-index: 98;

  img {
    width: 100%;
    height: 500px;
  }
}
// :deep(.slick-slide) {
//   text-align: center;
//   height: 160px;
//   line-height: 160px;
//   background: #364d79;
//   overflow: hidden;
// }

// :deep(.slick-slide h3) {
//   color: #fff;
// }
</style>